<template>
  <div ref="temperatureRef" style="height: 460px;"></div>
</template>

<script setup name="TemperatureChart">
import { ref, reactive } from 'vue'
import * as echarts from "echarts"
import { getPreviouSecondsTimes } from "@/utils/index"
// 获取节点
let temperatureRef = ref();
//获取实时数据
function updateTime() {
  init()
}

onMounted(() => {
  // updateTime(); // 1s = 1000ms, 10s = 100000
  // 每隔1分钟执行一次updateTime函数
  const intervalId = setInterval(updateTime, 1000);
  // 将 intervalId 保存起来，以便在组件卸载时清除定时器
  window['intervalId'] = intervalId;
  init()
})

function init() {
  //获取echarts实例
  const myCharts = echarts.init(temperatureRef.value);
  const { timeRecords, randomNum } = getPreviouSecondsTimes(200000);
  myCharts.setOption({
    tooltip: {
      trigger: 'axis', // 触发类型：坐标轴触发
      axisPointer: {
        type: 'line' // 指示器类型：直线指示器
      }
    },
    xAxis: {
      type: 'category',
      data: timeRecords,
      boundaryGap: false,
      boundaryGap: false,
      axisTick: {
        show: true,    // 是否显示坐标轴刻度
        lineStyle: {
          width: 1, // 设置加粗的宽度
          color: "#0c8cab" // 设置颜色渐变
        }
      },
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        lineStyle: {
          width: 1, // 设置加粗的宽度
          color: "#143d53" // 设置颜色渐变
        }
      },
      axisLabel: {
        color: "#fff",
        fontSize:'16',
      }
    },
    yAxis: {
      name: '单位（摄氏度）',
      nameTextStyle: {
        color: "#fff",
        nameLocation: "start",
      },
      color:'#fff',
      type: 'value',
      axisLabel: {
        formatter: '{value} °C',
        color: "#fff",
        fontSize:'16',
      },
      splitLine:{
        lineStyle:{
          type: 'dashed', //网格为虚线
          color: '#206987'
        }
      }
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "6%",
      top:"20%",
      containLabel: true,
    },
    series: [
      {
        data: randomNum,
        type: 'line',
        smooth: false,
        symbolSize: 6, // 设置标记的大小
        color:["#3980da"],
        lineStyle: { color: '#3980da', width: 1 },
        // 数值展示
        label:{
          show: true, // 是否展示
          position: 'top', // 展示位置
          color: '#fff', // 展示颜色
          fontSize: 16, // 展示文字大小
          formatter: '{c} °C', // 展示文字格式
        },
      }
    ],
    dataZoom: [
      {
        orient: "horizontal",
        show: true,//控制滚动条显示隐藏
        realtime: true, //拖动滚动条时是否动态的更新图表数据
        height: 10, //滚动条高度
        start: 0, //滚动条开始位置（共100等份）
        end: 100,//滚动条结束位置
        bottom: "1%",
        zoomLock: true, //控制面板是否进行缩放
      },
      {
        type: "inside",
        brushSelect: true,
        start: 0,
        end: 100,
        xAxisIndex: [0],
      }
    ]
  })
}

onUnmounted(() => {
  if (window['intervalId']) {
    clearInterval(window['intervalId']);
  }
});
</script>

<style lang='scss' scoped>

</style>